﻿<!-- saved from url=(0014)about:internet -->
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Java Script upload example</title>
	<link rel="stylesheet" href="styles.css">
    <style type="text/css">

select {
     border-right: 1px solid #b8b8b8;
     border-top: 1px solid #b8b8b8;
     border-left: 1px solid #b8b8b8;
     border-bottom: 1px solid #b8b8b8;
}
	</style>
</head>

<body>
Sample: <b>javascriptupload.html</b>&nbsp;&nbsp;<a href="javascript:location.reload(true);"><img border="0" src="images/refresh.png" width="16" height="16">&nbsp;Refresh frame</a>&nbsp;&nbsp;<a target="_parent" href="index.htm"><img border="0" src="images/home.png" width="16" height="16">&nbsp;Examples home</a><br/><br/>
<!-- text below wil be shown if JavaScript disabled at browser -->
<span id="noscriptdiv" style="border:1px  solid #FF0000;display:block;padding:5px;text-align:left; background: #FDF2F2;color:#000;">Active Scripting (JavaScript) should be enabled in your browser for this application to function properly!</span>
<script type="text/javascript">
	document.getElementById('noscriptdiv').style.visibility = 'hidden';
	document.getElementById('noscriptdiv').style.height = 0;
	document.getElementById('noscriptdiv').style.padding = 0;
	document.getElementById('noscriptdiv').style.border = 0;
</script>


<p>The example shows the possibility to change MultiPowUpload interface on user’s   own HTML interface with the help of Javascript + HTML.
</p>
For the  example you need to specify script URL that accept the files. Open the example  in a text editor and specify the property value &quot;uploadUrl&quot; of  MultiPowUpload object. The value can be: 
<ul>
  <li>For ASP: <code>FileProcessingScripts/ASP/ClearASP/uploadfiles.asp</code></li>
  <li>For PHP : <code>FileProcessingScripts/PHP/uploadfiles.php</code>&nbsp;<strong>(Default script)</strong></li>
  <li>For ASP.NET (C Sharp): <code>FileProcessingScripts/ASP.NET/CSharp/uploadfiles.aspx</code></li>
  <li>For ASP.NET (VB.NET): <code>FileProcessingScripts/ASP.NET/VBNET/uploadfiles.aspx</code></li>
   <li>For Perl : <code>FileProcessingScripts/PERL/uploadfiles.pl</code></li>
   <li>For Cold Fusion : <code>FileProcessingScripts/ColdFusion/uploadfiles.cfm</code></li>
   <li>For JSP : <code>FileProcessingScripts/JSP/uploadfiles.jsp</code></li>
</ul>

<div id="MultiPowUpload_holder">
<strong>You need at least 10 version of Flash player!</strong>
<a href="http://www.adobe.com/go/getflashplayer">&nbsp;<img border="0" src="images/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
</div>
<!-- SWFObject home page: http://code.google.com/p/swfobject/
You can replace src value with the http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js (Most users has such file cached)
 -->
<script type="text/javascript" src="Extra/swfobject.js"></script>
<script type="text/javascript">
	var params = {  		
		wmode: "transparent"
	};
	
	var attributes = {  
		id: "MultiPowUpload",  
		name: "MultiPowUpload",
		style:"position:absolute"	
	};
	
	var flashvars = {
	  "serialNumber": "put your serial number here",
	  "uploadUrl": "FileProcessingScripts/PHP/uploadfiles.php",
	  "useExternalInterface": "true",
	  "overlayObjectId":"browseButton",
	  "hiddenMode": "true"	  	  
	};

	swfobject.embedSWF("ElementITMultiPowUpload.swf", "MultiPowUpload_holder", "90", "30", "10.0.0", "Extra/expressInstall.swf", flashvars, params, attributes);
</script>

   
<script language="JavaScript">
	//Clear list
	function clearListBox(lstBox)
	{		
		while (lstBox.length > 0)
		{
			lstBox.remove(0);
		}
	}
	
	//Update HTML progress bar state
	function updateProgressBar(percentDone)
	{
		var rowProgress = document.getElementById("rowProgress");
		if(percentDone>=1)
			rowProgress.width = percentDone + "%";
		else
			rowProgress.width = "1";
	}
	
	function StopUpload()
	{
		MultiPowUpload.cancelUpload();
	}
	
	function StartUpload()
	{
		updateProgressBar(0);
		uploadedfilescount = 0;
		document.getElementById("lable").innerHTML = "";
		document.getElementById("serverresponse").innerHTML = "";
		MultiPowUpload.uploadAll();
	}
	
	function RemoveAll()
	{
		MultiPowUpload.removeAll();
	}
	
	function RemoveSelected()
	{
		var fileslist = document.getElementById("fileslist");
		for(i=fileslist.options.length-1; i>=0; i--)
		{			
			if(fileslist.options[i].selected == true)
			{
				//Remove file at MultiPowUpload list by file id 									
				MultiPowUpload.removeFile(fileslist.options[i].value);
				//Remove file from HTML list;
				//fileslist.options.remove(i);
				fileslist.options[i] = null;				
			}	
		}		
	}
	
	
	
	//MultiPowUpload_onSelect. Invoked when the user selects a file to upload or download from the file-browsing dialog box.
	function MultiPowUpload_onAddFiles(files)
	{
		
		var fileslist = document.getElementById("fileslist");
		var i = 0;		
		for(i=0; i<files.length; i++)
		{
			fileslist.options[fileslist.options.length] = new Option(files[i].name + 
			" (" + files[i].size + " bytes)", files[i].id, false, false );
		}
	}
	
	function MultiPowUpload_onRemoveFiles(files)
	{
		var i = 0;		
		for(i=0; i<files.length; i++)		
			lstBox.remove(files[i].id);
		
		
	}
	
	function MultiPowUpload_onClearList(files)
	{
		var fileslist = document.getElementById("fileslist");
		clearListBox(fileslist);
	}
	
	//MultiPowUpload_onProgress. Invoked periodically during the file upload or download operation
	function MultiPowUpload_onProgress(file) 
	{
	   var progressInfo = MultiPowUpload.getProgressInfo();	  
	   document.getElementById("lable").innerHTML = Math.round(progressInfo.totalPercent) + "% uploaded" + " (" + progressInfo.uploadedFilesCount + " files)";
	   updateProgressBar(progressInfo.totalPercent);
	}
	
	//MultiPowUpload_onError. Invoked when an input/output error occurs or when an upload/download fails because of an HTTP error
	function MultiPowUpload_onError(file, error) 
	{
	   window.alert(error);
	}
	
	function MultiPowUpload_onErrorMessage(error) 
	{
	   window.alert(error);
	}
	
	function MultiPowUpload_onStart()
	{		
		updateProgressBar(0);		
	}

	//MultiPowUpload_onCompleteAbsolute. Invoked when the upload or download of all files operation has successfully completed
	function MultiPowUpload_onComplete()
	{
		var progressInfo = MultiPowUpload.getProgressInfo();	 
		document.getElementById("lable").innerHTML = "Upload complete! Total bytes " + progressInfo.totalUploadedBytes + " (" + progressInfo.uploadedFilesCount + " files)";
		//var fileslist = document.getElementById("fileslist");
		//clearListBox(fileslist);
		updateProgressBar(100);
	}
	
	function MultiPowUpload_onThumbnailGenerateStart()
	{
		updateProgressBar(0);
	}

	function MultiPowUpload_onThumbnailGenerateProgress(countCompleted, totalFiles, percent)
	{
		document.getElementById("lable").innerHTML = countCompleted+" thumbnails created ("  + totalFiles + " total)";
		updateProgressBar(percent);
	}

	function MultiPowUpload_onThumbnailGenerateComplete()
	{	
		document.getElementById("lable").innerHTML = "Thumbnails creation complete!";
		updateProgressBar(100);
	}
	
	function MultiPowUpload_onServerResponse(li)
	{	
		var responselable = document.getElementById("serverresponse");		
		responselable.innerHTML += "<strong>" + li.serverResponse + "</strong>";		
	}
	  </script>
  
  <br>
  <br>
  <br>
  
<table><tr>
<td>
<a href="#" class="button" id="browseButton">
<span class="browse">Browse&nbsp;files...&nbsp;</span>
</a>
</td>
<td>
<a href="javascript:RemoveAll();" class="button">
<span class="clear">Clear&nbsp;all&nbsp;</span>
</a>
</td>
<td>
<a href="javascript:RemoveSelected();" class="button">
<span class="remove">Remove&nbsp;selected&nbsp;</span>
</a>
</td>
</tr></table>

<select id="fileslist" name="fileslist" style="HEIGHT:150px;WIDTH:300px;" multiple>
</select>

<table border="0"  width="300" height="17" cellpadding="0" cellspacing="0">
	<tr >
		<td style="border:1px solid #b8b8b8;">
			<table style="background:url(images/progressbar.gif) repeat-x" id="rowProgress" width="1" height="17" cellpadding="0" cellspacing="0">
				<tr>
					<td style="border-right:1px solid #b8b8b8;border-left:1px solid #b8b8b8;">&nbsp;</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<table><tr>
<td>
<a href="javascript:StartUpload();" class="button">
<span class="upload">Start&nbsp;upload&nbsp;</span>
</a>
</td>
<td>
<a href="javascript:StopUpload();" class="button">
<span class="cancel">Cancel&nbsp;upload&nbsp;</span>
</a>
</td>
</tr></table>


<div id="lable">&nbsp;</div><br>
<b>You should see server reponse below when upload complete. </b><br/>
<div id="serverresponse">&nbsp;</div>
<br />
The file uploader doesn’t work? See <a target="_blank" href="http://www.element-it.com/OnlineHelpMulti/MultiPowUpload_Manual_HTML/Troubleshooting.html">here</a> what you need for its proper work. 
<br /><br />
</body>
</html>
